<template>
  <div>
    <!-- 头部 -->
    <el-header>
      <div class="between">
        <div class="left"><h2>简易内容分享平台</h2></div>
        <div class="right">欢迎您:{{ name }}</div>
      </div>
    </el-header>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="类型">
        <el-select filterable v-model="formInline.tid" placeholder="选择类型">
          <el-option
            :label="e.name"
            :value="e.id"
            v-for="e in tags"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model.trim="formInline.info"
          placeholder="请输入描述"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-tooltip content="只能上传zip文件，且不超过5Mb">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://127.0.0.1:7001/api/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :on-change="change"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            accept=".zip"
          >
            <el-button slot="trigger" type="primary">选取文件</el-button>
          </el-upload>
        </el-tooltip>
      </el-form-item>

      <el-form-item>
        <el-button
          style="margin-left: 10px"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
      </el-form-item>
    </el-form>

    <iframe id="iframe" src="http://127.0.0.1:1568/" frameborder="0"></iframe>
  </div>
</template>
<script>
var res;
export default {
  data() {
    return {
      tags: [],
      name: "",
      formInline: {},
      fileList: [],
      size: "",
      path: "",
    };
  },
  mounted() {
    this.name = localStorage.name;
  },
  async created() {
    res = await this.http.post("/api/types", {});
    this.tags = res.data;
  },
  methods: {
    submitUpload() {
      if (!this.formInline.info) return this.$message.info("请输入描述");
      if (!this.formInline.tid) return this.$message.info("请选择类型");
      console.log(this.size);
      if (this.size / 1024 / 5 > 1) return this.$message.info("文件不超过5Mb");
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log("handlePreview", file);
    },
    change({ raw }) {
      console.log("change", raw);
      this.size = raw.size;
      this.path = raw.name;
    },
    flush() {
      var iframe = document.getElementById("iframe");
      iframe.src = iframe.src;
    },
    async ajax(flag) {
      if (flag) {
        res = await this.http.post("/api/remove", { path: this.path.replace('.zip','') });
        this.flush()
      } else {
        res = await this.http.post("/api/component",{ row: Object.assign({}, this.formInline)});
        if(!res.code) return this.$message.success("上传成功");
      }
    },
    async handleSuccess(response) {
      console.log("handleSuccess", response);
      /* 扫描页面 成功则录入数据 如果错误就移除文件夹 */
      setTimeout(() => {
        this.ajax(document.getElementsByTagName("iframe")[0].contentDocument.querySelector("vite-error-overlay"))
      }, 2000);
    },
  },
};
</script>

<style>
iframe {
  width: 98vw;
  height: calc(100vh - 200px);
}
</style>
